<template>
  <div class="home">
    <div style="position: absolute;top: 0;left: 0">
      <button @click="begin">开始抽奖</button>
      <button @click="isBegin = false">结束抽奖</button>
    </div>
    <div
        class="wrap"
        :style="{'transform':'rotateX(-20deg) rotateY('+ rotY +'deg)'}"
    >
      <img ref="f1"
           class="f1"
           v-for="(item,index) in imageList"
           :key="index"
           :src="item"
           :style="{'transform': 'rotateY(' + deg * index + 'deg) translateZ(645.75px) translateY(240px)','transition':'1s '+(len-index)*0.1+'s'}" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {},
  data() {
    return {
      imageList: [],
      imageStatus: 0, // 0为合并，1为打开
      oImg:null,
      oImg2: null,
      oImg3:null,
      deg: 0,
      oWrap: null,
      len: 0,
      newX: 0,
      newY: 0,
      lastX: 0,
      lastY: 0,
      minusX: 0,
      minusY: 0,
      rotX: -20,
      rotY: 0,
      isDown: false,
      isBegin: false,
      timerInterval: null,
    }
  },
  mounted() {

    // 加载测试数据
    for (let i = 1; i < 31; i++) {
      let path = "https://gjs-resourse.oss-cn-shenzhen.aliyuncs.com/resources/2024/05/img/" + i + ".jpg"
      this.imageList.push(path)
      this.imageList.push(path)
    }
    // 初始化

    this.initImages()
  },
  methods: {
    initImages() {



      this.len = this.imageList.length
      this.deg = 360 / this.imageList.length

    },
    mousedownHandle(e){
      this.lastX = e.clientX;
      this.lastY = e.clientY;
      this.isDown = true
    },
    mousemoveHandle(e){
      if (this.isDown){
        this.newX = e.clientX;
        this.newY = e.clientY;

        this.minusX = this.newX - this.lastX;
        this.minusY = this.newY - this.lastY;

        this.rotX -= this.minusY * 0.2;
        this.rotY += this.minusX * 0.1;

        this.lastX = this.newX;
        this.lastY = this.newY;
      }else{
        console.log("鼠标松开了+...")
      }


    },
    mouseupHandle(){
      console.log("鼠标松开了...")
      this.isDown = false
    },
    begin(){
      // 开始抽奖
      this.isBegin = true
      this.timerInterval = setInterval(()=>{
        if (this.isBegin){
          this.rotY ++
          console.log(this.rotY)
        }else{
          this.timerInterval = null
        }

      },10);
    },
  }
}
</script>

<style scoped>
body {
  background: #ff0000;
  overflow: hidden;
  /* 取消选中 */
  user-select: none;

}

@keyframes rotate {
  100% {
    transform: rotateY(360deg);
  }
}

.perspective {
  /*子元素透视 场景深度*/
  //perspective: 600px;
  perspective: 900px;
}

.wrap {
  /* 3d */
  width: 135px;
  height: 240px;
  margin: 100px auto;
  position: relative;
  /* border: 1px solid red; */
  transform: rotateX(-20deg) rotateY(0deg);
  transform-style: preserve-3d;

}

.wrap img {
  display: block;
  /* 绝对定位 */
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg) translateZ(0px);
  background: transparent;
  box-shadow: 0 0 4px #fff;
  border-radius: 5px;

  /* webkit */
}

/* 照片底座 */
.wrap p {
  width: 1200px;
  height: 1200px;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 100%;
  margin-left: -600px;
  margin-top: -600px;
  /* 沿着x轴按倒 */
  transform: rotateX(90deg);
}
.closeStyle{

}

.openStyle{

}
</style>
